<template>
  <div class="permission-wrap">
    <div class="easy-content">
      <el-form>
        <el-form-item style="margin-bottom:0;">
          <div class="order-warpper">

            <div class="group-1">
              <el-select placeholder="请选择查询系统"
                v-model="system"
                @change="_getRoleList"
                clearable>
                <el-option value="1"
                  label="商家端"></el-option>
                <el-option value="2"
                  label="员工端" v-if="modeName!=2"></el-option>
              </el-select>
            </div>
            <div class="group-1">
              <el-input placeholder="请输入角色名称/成员名称"
                v-model="search"
                clearable>
              </el-input>
            </div>
            <el-button type="primary"
              @click.native="_getRoleList"
              class="searc"
              style=" line-height: 32px;padding: 0 21px;">
              <i class="el-icon-search"></i>
            </el-button>
            <el-button type="primary"
              class="searc"
              size="small"
              style="margin-top:20px;float:right"
              @click.native="_addRole"
             
              v-has="'addrole'"
              >
              新增角色
            </el-button>
          </div>
        </el-form-item>
        <el-form-item class="easy-table">
          <el-table :data="roleList"
            style="width: 100%"
            max-height="600"
            >
            <el-table-column prop="num"
              label="编号"
              min-width="100">
            </el-table-column>
            <el-table-column prop="roleName"
              label="角色名称"
              min-width="80">
            </el-table-column>
            <el-table-column prop="system"
              label="系统"
              min-width="50">
            </el-table-column>
            <el-table-column prop="description"
              label="角色描述"
              min-width="100">
            </el-table-column>
            <el-table-column prop="member"
              label="成员列表"
              min-width="250">
              <template slot-scope="scope">
                <el-popover trigger="hover"
                  placement="top">
                  <p style="width:200px;">{{scope.row.member}}</p>
                  <div slot="reference"
                    class="name-wrapper">
                    {{scope.row.member}}
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="操作"
              min-width="200">
              <template slot-scope="scope">
                <el-button type="text"
                  size="small" @click.native="PermissionConfigHandel(scope.row)" v-has="'rolefunclist'">权限配置</el-button>
                <el-button type="text"
                  size="small" @click.native="MemberConfigHandle(scope.row.roleId)" v-has="'rolemember'">成员配置</el-button>
                <el-button type="text"
                  size="small"
                  @click="editRole(scope.row)"  v-has="'updaterole'">编辑</el-button>
                <el-button type="text"
                  size="small"
                  @click="_deleteRole(scope.row.roleId)"  v-has="'delrole'">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev , pager , next, sizes"
            :total="total"
            style="margin-top:20px">
          </el-pagination>
        </el-form-item>
      </el-form>
    </div>
    <!-- 新增编辑弹窗 -->
    <el-dialog :title="title"
      width="400px"
      :visible.sync="updateDialogVisible"
     
      @close="_resetFields('ruleForm')">
      <el-form label-width="80px"
        :model="updateRoleData"
        ref="ruleForm"
        :rules="rules">
        <el-form-item label="归属系统">
          <el-radio-group v-model="updateRoleData.systemId">
            <el-radio :label="1">商家端</el-radio>
            <el-radio :label="2" v-if="modeName ==3 || modeName ==4">员工端</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色名称"
          prop="roleName">
          <el-input v-model="updateRoleData.roleName" maxlength="10" v-filterSpecialChar  v-if="updateDialogVisible"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="updateRoleData.description"
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 8}" maxlength="30"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
        class="dialog-footer">
        <el-button type="primary"
         :disabled="isClick"
          @click="_sure('ruleForm')">确 定</el-button>
        <el-button @click="updateDialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 修改成员配置 -->
    <el-dialog title="修改成员配置"
      width="800px"
      :visible.sync="showMemberConfig"
      v-if="showMemberConfig"
      >
      <MemberConfig :roleId="roleId" :refresh="_getRoleList"/>
    </el-dialog>
    <!-- 配置权限 -->
    <el-dialog title="权限配置" v-if="showPermConfig"
     :visible.sync="showPermConfig" width="70%" 
    >
      <PermissionConfig :roleId="roleId" :systemId="systemId" />
    </el-dialog>
  </div>
</template>
<script>
import { roomLogList } from "@/public/js/log";
import { getDeptstaffAll } from "@/public/js/setting";
import { roomStatisticsList } from "@/public/js/count";
import MemberConfig from "./MemberConfig";
import PermissionConfig from "./PermissionConfig";
import {
  getRoleList,
  updateRole,
  addRole,
  deleteRole
} from "@/public/js/setting";
export default {
  data() {
    return {
      isClick: false,
      roleList: [],
      roleId:'',
      systemId:'',
      deptId: "",
      startEndTime: [],
      deptList: [],
      dept: [],
      moduleId: "",
      timeId: "1",
      pageNo: 1,
      pageSize: 10,
      search: "",
      total: 0,
      system: "",
      props: {
        value: "id",
        children: "children",
        label: "label"
      },
      updateDialogVisible: false,
      updateRoleData: {
        description: "",
        member: "",
        num: "",
        roleId: "",
        roleName: "",
        systemId: ""
      },
      modeName:'',
      title: "新增角色",
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" }
        ]
      },
      showMemberConfig: false, // 成员配置弹窗显示
      showPermConfig: false // 权限配置弹窗显示
    };
  },
  created() {
    //this.getDepList();
    //this._roomStatisticsList();
    this._getRoleList();
    this.modeName = sessionStorage.getItem('modeName');
    
   
  },
  components: {
    MemberConfig,
    PermissionConfig
  },
  mounted() {},
  methods: {
    // 获取部门列表数据
    getDepList() {
      getDeptstaffAll().then(res => {
        if (res.data.errCode === 0) this.deptList = res.data.adminDepartments;
      });
    },
    //获取角色列表
    _getRoleList() {
      getRoleList({
        pageSize: this.pageSize,
        pageNum: this.pageNo,
        search: this.search,
        system: this.system
      }).then(res => {
        this.roleList = res.data.roleList;
        this.total = res.data.total;
      });
    },
    editRole(row) {
      console.log(row);
      this.title = "修改角色";
      this.updateRoleData = JSON.parse(JSON.stringify(row));
      this.updateDialogVisible = true;
    },
    _restData() {
      this.updateRoleData = {
        description: "",
        member: "",
        num: "",
        roleId: "",
        roleName: "",
        systemId: (this.modeName ==1 || this.modeName ==2) ? 2 : 1
      };
    },
    _resetFields(formName) {
      console.log(formName);
      this.$refs[formName].resetFields();
    },
    _addRole() {
      this._restData();
      this.title = "新增角色";
      this.updateDialogVisible = true;

    },
    // 删除角色
    _deleteRole(id) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteRole({ id: id }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this._getRoleList();
          }
        });
      });
    },
    // 成员配置
    MemberConfigHandle(roleId){
      this.roleId = roleId;
      this.showMemberConfig = true;
    },
    // 权限配置
    PermissionConfigHandel(row){
      console.log(row)
      this.roleId = row.roleId;
      this.systemId = row.systemId;
      this.showPermConfig = true
    },
    // 保存
    _sure(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.isClick = true;
          //编辑
          if (this.updateRoleData.roleId) {
            updateRole({
              system: this.updateRoleData.systemId,
              id: this.updateRoleData.roleId,
              name: this.updateRoleData.roleName,
              description: this.updateRoleData.description
            }).then(res => {
              if (!res.data.errCode) {
                this.$message({
                  type: "success",
                  message: "修改成功"
                });
                this.isClick = false;
                this.updateDialogVisible = false;
                this._getRoleList();
              }
            });
          } else {
            addRole({
              name: this.updateRoleData.roleName,
              systemId: this.updateRoleData.systemId,
              description: this.updateRoleData.description
            }).then(res => {
              if (!res.data.errCode) {
                this.$message({
                  type: "success",
                  message: "新增成功"
                });
                 this.isClick = false;
                this.updateDialogVisible = false;
                this._getRoleList();
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 分页
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this._getRoleList();
    },
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this._getRoleList();
    }
  }
};
</script>
<style lang="scss" scoped>
.permission-wrap {
  .el-form-item {
    margin-bottom: 20px;
  }
  .group-1 {
    width: 180px;
    display: inline-block;
    margin-right: 20px;
    .el-cascader,
    .el-select {
      width: 100%;
    }
  }
  .group-2 {
    width: 280px;
    display: inline-block;
    margin-right: 20px;
    .el-date-editor {
      width: 100%;
      padding: 0 10px;
    }
  }
  .group-3 {
    margin-top: 20px;
  }
  .btn {
    text-align: right;
  }
  .el-input__inner {
    height: 34px;
  }
  .search-button .el-button {
    padding: 9px 20px;
  }
}
</style>


